import React, { useEffect } from 'react';
import { Segmented, Radio } from 'antd';
import styled from '@emotion/styled';
import { useTranslation } from 'react-i18next';
import { useCardCollect } from '../Context/CardCollectContext';
import useSyncState from '../hooks/useSyncState';
import { SegmentedValue } from 'antd/lib/segmented';

const VariableContainer = styled.div``;

const RoleListContainer = styled.div`
	display: flex;
	margin-bottom: 20px;
`;

const Tabs = styled(Segmented)`
	margin-bottom: 14px;
`;

const RoleItem = styled.div`
	width: 124px;
	height: 40px;
	border-radius: 4px;
	border: 1px solid;
	margin-right: 14px;
	cursor: pointer;
	border-color: ${(props: { roleId: number; selectedRoleId: number }) => (props.roleId === props.selectedRoleId ? '#252B48' : '#e3e3e3')};
`;

const RoleText = styled.p`
	font-size: 13px;
	font-weight: 400;
	color: #202020;
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100%;
	margin: 0;
`;

interface VariableTabProps {
	parameterName?: string;
	onRoleChange?: (roleId: number) => void;
}

const VariableTab = (props: VariableTabProps) => {
	const { t } = useTranslation();
	const { onRoleChange, parameterName = '' } = props;
	const { roles } = useCardCollect();

	const [options, setOptions] = useSyncState<any[]>([
		{ label: '客户信息', value: 'customer' }
		// { label: '业务信息', value: 'business' }
	]);

	const [tab, setTab] = useSyncState<string>('customer');

	const [selectedRole, setSelectedRole] = useSyncState<number>(0); // 角色

	//初次洗出客户信息变量和业务信息变量
	useEffect(() => {
		const items = parameterName.split('-');
		if (items.length === 4) {
			const role = roles().find((item: any) => item.label === items[1]);
			setSelectedRole(role?.value);
		} else {
			setSelectedRole(roles()[0]?.value);
		}

		return () => {
			setSelectedRole(0);
		};
	}, []);

	const onChangeSegmented = (value: SegmentedValue) => {
		setTab(value.toString());
	};

	const selectRole = (roleId: number) => {
		setSelectedRole(roleId);
		onRoleChange && onRoleChange(roleId);
	};

	return (
		<VariableContainer>
			<Tabs
				options={options()}
				value={tab()}
				onChange={value => {
					onChangeSegmented(value);
				}}
			/>
			{tab() === 'customer' ? (
				<RoleListContainer>
					{roles().map((item, index) => {
						return (
							<RoleItem roleId={item.value} selectedRoleId={selectedRole()} onClick={() => selectRole(item.value)} key={index}>
								<RoleText>{item.label}</RoleText>
							</RoleItem>
						);
					})}
				</RoleListContainer>
			) : (
				''
			)}
		</VariableContainer>
	);
};

export default VariableTab;
